<template>
  <div class="">
    <div class="header">
      <header>
        <div class="head1">库存管理</div>
        <div class="head2">库存一入库</div>
        <div class="head3">库存一出库</div>
      </header>
      <button class="button" @click.prevent>添加入库</button>
    </div>
    <hr>
    <!-- 筛选 -->
    <el-form :inline="true" :model="message" class="demo-form-inline">
      <span class="formtitle">筛选：</span>
      <el-form-item size="small" >
        <el-select placeholder="全部"  v-model="message.site" >
          <el-option label="全部" value="全部" />
          <el-option label="加工中心" value="加工中心" />
          <el-option label="实体店" value="实体店" />
          <el-option label="办公室" value="办公室" />
        </el-select>
      </el-form-item>
      <el-form-item size="small">
        <el-select placeholder="全部"   v-model="message.type">
          <el-option label="全部" value="全部" />
          <el-option label="水果" value="水果" />
          <el-option label="蔬菜" value="蔬菜" />
          <el-option label="蛋白质" value="蛋白质" />
          <el-option label="厨房干杂" value="厨房干杂" />
          <el-option label="耗材" value="耗材" />
          <el-option label="设备" value="设备" />
        </el-select>
      </el-form-item>
      <el-form-item size="small">
        <el-date-picker type="datetime" placeholder="起始时间"   v-model="message.toTime"/>
        <span class="zhi">至</span>
        <el-date-picker type="datetime" placeholder="截止时间"  v-model="message.fromTime" />
      </el-form-item>
      <el-form-item size="small">
        <el-input placeholder="包材名称"  v-model="message.name" />
      </el-form-item>
      <el-form-item size="small">
        <button class="button" @click.prevent>筛选</button>
      </el-form-item>
    </el-form>
    <hr>
    <!-- 退款订单表格 -->
    <el-table ref="multipleTableRef"  border :data="tableData" style="width: 100%" >
      <el-table-column label="使用场景" width="120" align="center">
        <template #default="scope">{{ scope.row.number }}</template>
      </el-table-column>
      <el-table-column property="cuisine" label="二级分类" width="120" align="center" />
      <el-table-column property="refund" label="三级分类" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="location" label="是否入库" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="payment" label="是否直接成本" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="order" label="产品名" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="name" label="规格" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="phone" label="单位" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="orderTime" label="入库量" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="refundStatus" label="进价" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="mony" label="金额" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="a" label="状态" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="b" label="折旧年（选填）" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="c" label="折旧率" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="d" label="折旧成本" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="e" label="最后入库时间" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="f" label="最后出库时间" align="center" show-overflow-tooltip width="120" />
      <el-table-column property="g" label="备注信息" align="center" show-overflow-tooltip width="120" />
      <el-table-column label="操作" width="130" align="center" fixed="right">
        <template #default="scope">
          <u class="audit">编辑</u>
          <u class="audit">删除</u>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagebox"><el-pagination 
      background 
      layout="prev, pager, next" 
      :total="5" 
      :default-page-size="7"
      /></div>
  </div>
</template>

<script  lang="ts">
export default {
  name: '',
  data() {
    return {
      message: {
        site:'',
        type:'',
        toTime:'',
        fromTime:'',
        name:'',
      },
      tableData: [
        {
          number: '办公室',
          cuisine: '包材消耗',
          refund: '水果',
          location: '是',
          payment: '是',
          order: '西瓜',
          name: 2,
          phone: '公斤',
          orderTime: 20,
          refundStatus: 1,
          mony:20,
          a:'库存充足',
          b:'无',
          c:'',
          d:'',
          e:'2022-09-19',
          f:'2022-11-09',
          g:'无备注',
        },
        {
          number: '办公室',
          cuisine: '消耗',
          refund: '设备',
          location: '是',
          payment: '是',
          order: '电脑',
          name: 1,
          phone: '台',
          orderTime: 5,
          refundStatus: 3600,
          mony:18000,
          a:'库存紧缺，及时补货',
          b:'五年',
          c:'20%',
          d:'3600',
          e:'2017-07-19',
          f:'2017-07-19',
          g:'无备注',
        },
      ],
    }
  },
}
</script>

<style scoped lang="less">
// 头部
.header {
  display: flex;
  justify-content: space-between;
}

header {
  display: flex;
  align-items: flex-end;

  .head1 {
    width: 202px;
    height: 38px;
    background-color: #999;
    font-size: 18px;
  }

  .head2 {
    width: 202px;
    height: 50px;
    background-color: #888;
    font-size: 20px;
    font-weight: bold;
  }

  .head3 {
    width: 202px;
    height: 38px;
    background-color: #ccc;
    font-size: 16px;
  }

  .head1,
  .head2,
  .head3 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;

  }
}

.button {
  border: none;
  background-color: rgba(153, 153, 153, 1);
  color: #fff;
  width: 78px;
  height: 27px;
}

//表单
.formtitle {
  position: relative;
  top: -7px;
}

.zhi {
  position: relative;
  left: -17px;
}

// 表格
.audit{
  margin: 0 10px;
}
.pagebox{
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: auto;
}
</style>
